<template>
	<div class="login-container">
		<el-form class="login-form">
			<div class="title-container">
				<h3 class="title">用户登陆</h3>
			</div>
			<!-- username -->
			<el-form-item>
				<span class="svg-container">
					<svg-icon icon="user"></svg-icon>

					<el-input placeholder="username" name="username" type="text" />
				</span>
			</el-form-item>

			<!-- password -->
			<el-form-item>
				<span class="svg-container">
					<svg-icon icon="https://res.lgdsunday.club/user.svg"></svg-icon>
					<el-input placeholder="password" name="password" />
					<svg-icon class="pwd-icon" icon="eye"></svg-icon>
				</span>
			</el-form-item>

			<!-- 登陆按钮 -->
			<el-button type="primary" style="width: 100%; margin-top: 10px"> 登陆 </el-button>
		</el-form>
	</div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
	$bg: #2d3a4b;
	$dark_gray: #889aa4;
	$light_gray: #eee;
	$cursor: #fff;

	.login-container {
		width: 100%;
		min-height: 100%;
		overflow: hidden;
		background-color: $bg;

		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 160px 35px 0;
			margin: 0 auto;
			overflow: hidden;

			:deep(.el-form-item) {
				color: #454545;
				background: rgba(0, 0, 0, 0.1);
				border: 1px solid rgba(255, 255, 255, 0.1);
				border-radius: 5px;
			}

			:deep(.el-input) {
				display: inline-block;
				width: 85%;
				height: 47px;

				.el-input__wrapper {
					background-color: transparent;
					box-shadow: none;
				}

				input {
					height: 47px;
					padding: 12px 5px 12px 15px;
					color: $light_gray;
					background: transparent;
					border: 0px;
					border-radius: 0px;
					caret-color: $cursor;
					-webkit-appearance: none;
				}
			}
		}

		.tips {
			margin-bottom: 10px;
			font-size: 16px;
			line-height: 28px;
			color: #fff;

			span {
				&:first-of-type {
					margin-right: 16px;
				}
			}
		}

		.svg-container {
			display: flex;
			width: 100%;
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			align-items: center;

			.pwd-icon {
				margin-left: 40px;
			}
		}

		.title-container {
			position: relative;

			.title {
				margin: 0px auto 40px auto;
				font-size: 26px;
				font-weight: bold;
				color: $light_gray;
				text-align: center;
			}

			:deep(.lang-select) {
				position: absolute;
				top: 4px;
				right: 0;
				padding: 4px;
				font-size: 22px;
				cursor: pointer;
				background-color: white;
				border-radius: 4px;
			}
		}

		.show-pwd {
			position: absolute;
			top: 7px;
			right: 10px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}
	}
</style>
